<template>
  <div class="container">
    <div
      class="logo"
      v-if="route.meta.showLogo !== false"
      @click="router.push({ name: 'home' })"
    ></div>
    <div class="bgm" :class="{ isPlay }" @click="handleToggle"></div>
    <div class="back" v-if="route.meta.showBack !== false" @click="router.push({ name: 'home' })">
      <div class="bg"></div>
      <svg
        class="icon"
        viewBox="0 0 1024 1024"
        xmlns="http://www.w3.org/2000/svg"
        width="200"
        height="200"
      >
        <path
          d="M511 136.5c-206.5 0-373.8 167.4-373.8 373.8S304.5 884.1 511 884.1s373.8-167.4 373.8-373.8S717.4 136.5 511 136.5zM719 541c-12.1 94.3-96.9 162.4-192 162.4H394.4c-8.8 0-15.9-7.1-15.9-15.9v-32.3c0-8.8 7.1-15.9 15.9-15.9H530c58.7 0 112.1-39.7 123.9-97.2 16.2-79.1-44.1-148.9-120.4-148.9H429.2v44.1l-75.8-63.8c-7.6-6.4-7.6-18.1 0-24.5l75.8-63.8v44.1h104.3c111.3 0 200.2 97.6 185.5 211.7z"
          fill="#fe7e0d"
        ></path>
      </svg>
    </div>
    <RouterView />
    <audio
      src="https://chunleibei.oss-cn-shanghai.aliyuncs.com/LSHaHbTpxY3zJk7m7aQQM.mp3"
      autoplay="autoplay"
      loop="true"
      ref="audioRef"
    />
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import wechat from 'weixin-js-sdk'
import { getWechatConfig } from '@/api/index.js'
import { onMounted, ref } from 'vue'

const route = useRoute()
const router = useRouter()

getWechatConfig().then((res) => {
  wechat.config({
    debug: false,
    jsApiList: [
      'updateAppMessageShareData',
      'updateTimelineShareData',
      'onMenuShareTimeline',
      'onMenuShareAppMessage'
    ],
    ...res.data
  })
})

wechat.ready(() => {
  const title = '第十届“春蕾杯”比武大赛'
  const desc = '拾光如初 从“芯”出发'
  const link = 'https://2024.vsad.cn/chunleibei'
  const imgUrl = `${link}/share-icon.jpg`

  wechat.updateAppMessageShareData({
    title,
    desc,
    link,
    imgUrl
  })

  wechat.updateTimelineShareData({
    title,
    link,
    imgUrl
  })
})

const play = () => {
  audioRef.value.play()
}

const audioRef = ref()
const isPlay = ref(false)
onMounted(() => {
  document.addEventListener('touchstart', play)
  audioRef.value.addEventListener('play', () => {
    isPlay.value = true
    document.removeEventListener('touchstart', play)
  })
  document.addEventListener('WeixinJSBridgeReady', play)
})

const handleToggle = () => {
  if (isPlay.value) {
    audioRef.value.pause()
    isPlay.value = false
  } else {
    audioRef.value.play()
    isPlay.value = true
  }
}
</script>

<style lang="less" scoped>
@keyframes bgmRotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}

.container {
  height: 100vh;
  background: url(./assets/img/bg.jpg) no-repeat center / 100% 100%;

  .logo {
    position: absolute;
    width: 414px;
    height: 113px;
    background: url(./assets/img/logo.png) no-repeat center / 100% 100%;
    left: 89px;
    top: 56px;
  }

  .bgm {
    width: 90px;
    height: 90px;
    background: url(./assets/img/bgm.png) no-repeat center / 100% 100%;
    position: absolute;
    right: 50px;
    top: 50px;

    &.isPlay {
      animation: bgmRotate 1s linear infinite;
    }
  }

  .back {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 12%;
    display: flex;
    justify-content: center;
    align-items: center;

    .bg {
      width: 60px;
      height: 60px;
      background: #fff;
      border-radius: 50%;
    }

    .icon {
      position: absolute;
      width: 120px;
      height: 120px;
    }
  }
}
</style>
